import { useState } from "react";
import { Link } from "react-router-dom";
import { Toaster } from "react-hot-toast";

import GenderCheckbox from "./GenderCheckbox";
import useSignup from "../../hooks/useSignup";

const SignUp = () => {
  const [inputs, setInputs] = useState({
    fullName: "",
    username: "",
    password: "",
    confirmPassword: "",
    gender: "",
  });

  const { loading, signup } = useSignup();

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(">>>", inputs);
    await signup(inputs);
  };

  const handleCheckboxChange = (gender) => {
    setInputs({ ...inputs, gender });
    console.log(">>>", inputs);
  };

  return (
    <div className="flex flex-col items-center justify-center min-w-96 mx-auto">
      <div className="w-fll p-6 rounded-lg shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-10">
        <h1 className="text-3xl font-semibold text-center text-gray-300">
          Sign Up<span className="text-blue-500 ml-2">ChatApp</span>
        </h1>
      </div>

      <form onSubmit={handleSubmit}>
        <div>
          <label className="label p-2" htmlFor="FullName">
            <span className="text-base label-text">FullName</span>
          </label>
          <input
            id="FullName"
            type="text"
            placeholder="Enter Full Name"
            className="w-full input input-bordered h-10"
            value={inputs.fullName}
            onChange={(e) => setInputs({ ...inputs, fullName: e.target.value })}
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="Username">
            <span className="text-base label-text">Username</span>
          </label>
          <input
            id="Username"
            type="text"
            placeholder="Enter Username"
            className="w-full input input-bordered h-10"
            value={inputs.username}
            onChange={(e) => setInputs({ ...inputs, username: e.target.value })}
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="Password">
            <span className="text-base label-text">Password</span>
          </label>
          <input
            id="Password"
            type="text"
            placeholder="Enter Password"
            className="w-full input input-bordered h-10"
            value={inputs.password}
            onChange={(e) => setInputs({ ...inputs, password: e.target.value })}
          />
        </div>

        <div>
          <label className="label p-2" htmlFor="ConfirmPassword">
            <span className="text-base label-text">Confirm Password</span>
          </label>
          <input
            id="ConfirmPassword"
            type="text"
            placeholder="Enter Confirm Password"
            className="w-full input input-bordered h-10"
            value={inputs.confirmPassword}
            onChange={(e) =>
              setInputs({ ...inputs, confirmPassword: e.target.value })
            }
          />
        </div>

        <GenderCheckbox
          onCheckboxChange={handleCheckboxChange}
          selectedGender={inputs.gender}
        />

        <Link
          to="/login"
          className="text-sm hover:underline hover:text-blue-600 mt-2 inline-block p-2"
        >
          Already have an account?
        </Link>
        <div>
          <button className="btn btn-block btn-sm mt-2" disabled={loading}>
            {loading ? (
              <span className="loading loading-spinner"></span>
            ) : (
              "Sign Up"
            )}
          </button>
        </div>
      </form>

      <Toaster />
    </div>
  );
};

export default SignUp;
